<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Smoothline</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body>
    <div id="Main" style="width:1000px;height:900px;"></div>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(
        [
            "zrender",
            "zrender/animation/animation",
            "zrender/shape/Polyline",
            "zrender/shape/Polygon"
        ], 
        function(zrender, Animation, PolylineShape, PolygonShape){

            // 初始化zrender
            var zr = zrender.init( document.getElementById("Main") );

            var pointList = [];
            for (var i = 0; i < 10; i++) {
                pointList.push([Math.random() * 300 + 100, Math.random() * 300 + 100]);
            }

            var smoothLine = new PolylineShape({
                style : {
                    pointList : pointList,
                    smooth : 'spline',
                    brushType : 'stroke',
                    color : 'rgba(220, 20, 60, 0.8)',
                    strokeColor : "rgba(220, 20, 60, 0.8)",
                    lineWidth : 2
                    // lineType : 'dotted'
                }
            });

            var smoothPolygon = new PolygonShape({
                style : {
                    pointList : [[50, 50], [200, 10], [100, 200], [50, 150], [50, 50]],
                    smooth : 0.5,
                    smoothConstraint: [[-Infinity, -Infinity], [200, Infinity]],
                    brushType : 'both',
                    color : 'rgba(220, 20, 60, 0.4)',
                    strokeColor : "rgba(220, 20, 60, 1)",
                    lineWidth : 2
                    // lineType : 'dotted'
                }
            });
            zr.addShape(smoothPolygon);
            zr.addShape(smoothLine);
            zr.render(); 
        }
    )
    </script>
</body>
</html>